<template>
  <n-grid cols="24" item-responsive responsive="screen">
    <n-grid-item span="24 s:12 m:8" offset="0 s:6 m:8">
      <n-form ref="formRef" :label-width="80" label-placement="left" style="margin-top: 50px">
        <n-form-item label="卡号:">
          <n-input v-model:value="creditCard.creditNum"  />
        </n-form-item>
        <n-form-item label="银行名称:">
          <n-select v-model:value="creditCard.bankId" :options="banksOption"
                    label-field="bankName"
                    value-field="bankId"
                    placeholder="请选择银行卡"
          />
        </n-form-item>
        <n-form-item label="还款日期:">
          <n-date-picker
              v-model:value="creditCard.repayTime"
              type="date"
              format="yyyy年MM月dd日"
              style="width: 100%"
          />
        </n-form-item>
        <n-form-item label="还款额度:">
          <n-input-number
              :default-value="0"
              v-model:value="creditCard.repayAmount"
              :parse="parseCurrency"
              :format="formatCurrency"
              :precision="2"
              :step="0.5"
              style="width: 100%"
          />
        </n-form-item>
        <n-form-item label="备注:">
          <n-input
              v-model:value="creditCard.remarks"
              type="textarea"
              placeholder="请输入还款备注"
              maxlength="100"
              show-count
          />
        </n-form-item>
        <n-form-item label="操作">
          <n-button type="info" ghost block @click="creditClick">
            确认添加
          </n-button>
        </n-form-item>
      </n-form>
    </n-grid-item>
  </n-grid>
</template>

<script>
export default {
  name: "AddOfCreditCardTemplate",
  data(){
    return{
      creditCard:{
        creditNum:'',
        bankId:'',
        repayTime:new Date().getTime(),
        repayAmount:0.00,
        remarks:''
      },
      banksOption:[]
    }
  },
  methods:{
    parseCurrency: (input) => {
      const nums = input.replace(/(,|¥|\s)/g, "").trim();
      if (/^\d+(\.(\d+)?)?$/.test(nums))
        return Number(nums);
      return nums === "" ? null : Number.NaN;
    },
    formatCurrency: (value) => {
      if (value === null)
        return "";
      return `${value.toLocaleString("en-US")} ¥`;
    },
    creditClick:function (){
      this.axios.post("/credit/addCredit",this.creditCard).then((res)=>{
        const data=res.data;
        let msg;
        if (data.code>0){
          msg=data.error;
        }else{
          msg=data.data;
        }
        if (this.$utils.tipsOption(data.code, data.status, msg)) {
          return;
        }
        this.$router.go(0);
      })
    }
  },
  mounted() {
    this.$utils.readerBank().then((res)=>{
      this.banksOption=res;
    })
  }

}
</script>

<style scoped>

</style>